<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="echartsJs/echarts.js"></script>
    <style>
        .box {
            width: 600px;
            height: 400px;
            display: block;
            border: 1px solid #999;
        }
    </style>
</head>

<body>
    <div class="box" id="box1"></div>
    <div class="box" id="box2"></div>
    <script>

        //第一个柱状图
        let chartDom = document.getElementById("box1");
        let myChart = echarts.init(chartDom);
        let option = {
            legend: {},
            tooltip: {},
            dataset: {

                // 二维数组默认是以竖着的作为坐标轴上的种类
                source: [
                    // 提供一份数据。(echarts的数据集默认是以二维数组作为数据集类型的)
                    // 默认规则：
                    // [0][0]数据对于图形生成没有任何影响
                    // [0][1~]数据将作为series中的系列数据名称进行定义，并生成legend
                    // [1~][0]数据将作为xAxis的type取值category中的类目分类
                    // [1~][1~]数据对于series中的每个系列进行数据的生成和定义

                    ['product', '2015', '2016', '2017'],
                    ['Matcha Latte', 43.3, 85.8, 93.7],
                    ['Milk Tea', 83.1, 73.4, 55.1],
                    ['Cheese Cocoa', 86.4, 65.2, 82.5],
                    ['Walnut Brownie', 72.4, 53.9, 39.1]
                ]
            },
            // 声明一个 X 轴，类目轴（category）。默认情况下，类目轴对应到 dataset 第一列。
            xAxis: { type: 'category' },
            // 声明一个 Y 轴，数值轴。
            yAxis: {},
            // 声明多个 bar 系列，默认情况下，每个系列会自动对应到 dataset 的每一列。
            series: [{ type: 'bar' }, { type: 'bar' }, { type: 'bar' }]
        };
        myChart.setOption(option);

        let chartDom2 = document.getElementById("box2");
        let myChart2 = echarts.init(chartDom2);
        let option2 = {
            legend: {},
            tooltip: {},
            dataset: {


                source: [
                    ['product', '2015', '2016', '2017'],
                    ['Matcha Latte', 43.3, 85.8, 93.7],
                    ['Milk Tea', 83.1, 73.4, 55.1],
                    ['Cheese Cocoa', 86.4, 65.2, 82.5],
                    ['Walnut Brownie', 72.4, 53.9, 39.1]
                ]
            },
            // 声明一个 X 轴，类目轴（category）。默认情况下，类目轴对应到 dataset 第一列。
            xAxis: { type: 'category' },
            // 声明一个 Y 轴，数值轴。
            yAxis: {},

            // yAxis: {type: 'category'},
            // xAxis: { type: 'value' },
            // 声明多个 bar 系列，默认情况下，每个系列会自动对应到 dataset 的每一列。


            // seriesLayoutBy: 'row'基于行映射，将行(2015,2016,2017)对应到x轴的类目轴种类中去
            // seriesLayoutBy: 'column',默认值，基于列映射,将列(Matcha Latte,Milk Tea,Cheese Cocoa,Walnut Brownie)对应到x轴的类目轴种类中去
            series: [
                { type: 'bar', seriesLayoutBy: 'column' }, 
                { type: 'bar', seriesLayoutBy: 'column' }, 
                { type: 'bar', seriesLayoutBy: 'column' }
            ]
        };
        myChart2.setOption(option2);


    </script>
</body>

</html>